<template lang="">
  <div class="div">
    <h1 class="h1">注册</h1>
    <van-form class="form">
      <van-field
        v-model="username"
        name="手机号"
        placeholder="请输入手机号"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="验证码"
        placeholder="请输入验证码"
        :rules="[{ required: true, message: '请填写验证码' }]"
      >
        <template #button>
          <van-button
            class="send-sms-btn"
            native-type="button"
            @click="send"
            size="small"
            round
            type="default"
            >发送验证码</van-button
          >
        </template>
      </van-field>
      <van-field
        v-model="password"
        type="password"
        name="密码"
        placeholder="请输入登录密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="邀请码"
        placeholder="请输入邀请码"
        :rules="[{ required: true, message: '请填写邀请码' }]"
      />
      <div style="margin: 16px;" class="btns">
        <van-button round block type="info" native-type="submit" class="btn"
          >注册</van-button
        >
      </div>
    </van-form>
  </div>
</template>
<script>
export default {
  data () {
    return {

    }
  }
}
</script>
<style>
.div {
  position: relative;
}
.h1 {
  position: absolute;
  top: 100px;
  left: 35px;
  font-size: 20px;
}
.form {
  position: absolute;
  top: 150px;
  width: 300px;
  left: 25px;
}
.btns {
  padding-top: 50px;
}
.btn {
  background-color: #fe7003 !important;
  /* display:block;
margin:0 auto */
  text-align: center;
  border: 0;
}
.send-sms-btn{
border: 0;
color: #fe7003;
}
</style>
